<div class="panel panel-default">
  <div class="panel-heading"
       data-gn-slide-toggle="">
    <i class="fa fa-link"></i><i class="icon-external-link"></i>&nbsp;
    <span data-translate="">associatedResources</span>

    <div data-gn-need-help="user-guide/associating-resources/index.html"
         data-icon-only="true"
         class="pull-right"></div>
  </div>
  <div class="panel-body">
    <div class="btn-toolbar">
      <div class="btn-group"
           data-ng-if="readonly !== true">
        <button type="button"
                class="btn btn-default btn-xs dropdown-toggle"
                data-toggle="dropdown">
          <i class="fa fa-fw fa-plus"></i>
          <span data-translate="">add</span>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li data-ng-show="::isCategoryEnable('thumbnail') || isCategoryEnable('onlinesrc')">
            <a href=""
              data-ng-click="onlinesrcService.onOpenPopup('onlinesrc')">
              <i class="fa gn-icon-onlinesrc"></i>
              <i class="icon-external-link"></i>&nbsp;
              <span data-translate="">addOnlinesrcTitle</span>
            </a>
          </li>
          <li class="dropdown-header"
              data-translate>linkMetadata
          </li>
          <li data-ng-show="::isCategoryEnable('parent')">
            <a href=""
              data-ng-click="onlinesrcService.onOpenPopup('parent')">
              <i class="fa gn-icon-parent"></i>
              <i class="icon-external-link"></i>&nbsp;
              <span data-translate="">linkToParent</span>
            </a>
          </li>
          <li data-ng-show="::isCategoryEnable('service') && !gnCurrentEdit.isService">
            <a href=""
              data-ng-click="onlinesrcService.onOpenPopup('service')">
              <i class="fa gn-icon-service"></i>
              <i class="icon-external-link"></i>&nbsp;
              <span data-translate="">linkToService</span>
            </a>
          </li>
          <li data-ng-show="::isCategoryEnable('dataset') && gnCurrentEdit.isService">
            <a href=""
              data-ng-click="onlinesrcService.onOpenPopup('dataset')">
              <i class="fa gn-icon-dataset"></i>
              <i class="icon-external-link"></i>&nbsp;
              <span data-translate="">linkToDataset</span>
            </a>
          </li>
          <li data-ng-show="::isCategoryEnable('source')">
            <a href=""
              data-ng-click="onlinesrcService.onOpenPopup('source')">
              <i class="fa gn-icon-source"></i>
              <i class="icon-external-link"></i>&nbsp;
              <span data-translate="">linkToSource</span>
            </a>
          </li>
          <li data-ng-show="::isCategoryEnable('fcats')">
            <a href=""
              data-ng-click="onlinesrcService.onOpenPopup('fcats')">
              <i class="fa gn-icon-fcats"></i>
              <i class="icon-external-link"></i>&nbsp;
              <span data-translate="">linkToFeatureCatalog</span>
            </a>
          </li>
          <li data-ng-show="::isCategoryEnable('sibling')">
            <a href=""
              data-ng-click="onlinesrcService.onOpenPopup('sibling')">
              <i class="fa gn-icon-sibling"></i>
              <i class="icon-external-link"></i>&nbsp;
              <span data-translate="">linkToSibling</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- /.btn-toolbar -->
    <div class="gn-onlinesrc-panel">

      <!-- ******* Display Thumbnails ******* -->
      <ul class="list-inline"
          data-ng-show="::isCategoryEnable('thumbnail')">
        <li class="gn-list-thumb thumbnail"
            data-ng-repeat="thumb in relations.thumbnails">
          <div class="thumb-small"
               title="{{thumb.title | gnLocalized: lang}}"
               data-gn-img-modal="thumb"
               style="background-image: url('{{onlinesrcService.getApprovedUrl(thumb.lUrl || thumb.id)}}')"/>

          <a href=""
             class="onlinesrc-remove"
             data-ng-if="readonly !== true"
             data-ng-click="onlinesrcService.removeThumbnail(thumb)"
             data-gn-confirm-click="{{'removeThumbnailConfirm' | translate:{url: thumb.lUrl} }}"
             title="{{'removeThumbnail' | translate}}"
             aria-label="{{'removeThumbnail' | translate}}">
            <i class="btn fa fa-times text-danger"></i>
          </a>
          <a href=""
             class="onlinesrc-edit"
             data-ng-if="readonly !== true"
             data-ng-show="allowEdits"
             title="{{'edit' | translate}}"
             data-ng-click="onlinesrcService.onOpenPopup('onlinesrc', thumb)">
            <i class="btn fa fa-pencil"></i>
          </a>
        </li>
      </ul>

      <!-- ******* List of online resources ******* -->
      <h2 class="onlinesrc-title"
          data-ng-show="::isCategoryEnable('onlinesrc') && relations.onlines && relations.onlines.length > 0">
          <i class="fa fa-link"></i>
          <i class="icon-external-link"></i>&nbsp;
          <span data-translate="">onlinesrc</span>
        <a href=""
           class="btn btn-default btn-xs pull-right"
           data-ng-click="onlinesrcService.onOpenPopup('onlinesrc')">
          <i class="fa fa-fw fa-plus"></i>
          <span data-translate="">add</span>
        </a>
      </h2>

      <div class="row"
           data-ng-show="relations.onlines.length > 1">
        <span data-translate="">sortLinksBy</span>
        <a class="btn btn-link"
           data-ng-repeat="s in sortLinksOptions"
           data-ng-click="sortLinksBy(s)">
          <span>{{('link-' + s) | translate}}</span>

          <i class="fa"
             data-ng-show="sortLinksProperty === s"
             data-ng-class="{'fa-caret-down': !sortLinksReverse, 'fa-caret-up': sortLinksReverse}"></i>
        </a>

        <input type="text" class="form-control input-sm"
               placeholder="{{'filter' | translate}}"
               data-ng-show="relations.onlines.length > 9"
               data-ng-model="sortLinksFilter">
      </div>
      <ul class="list-group"
          data-ng-show="::isCategoryEnable('onlinesrc') && relations.onlines && relations.onlines.length > 0">
        <li class="list-group-item" href=""
            data-ng-repeat="resource in relations.onlines | filter:sortLinksFilter | orderBy:sortLinks:sortLinksReverse">
          <div class="row">
            <div class="col-md-1">
              <i class="fa fa-fw"
                 data-ng-class="onlinesrcService.getIconByProtocol(resource)"></i>
            </div>
            <div class="col-md-10">
              {{resource.protocol || ''}}<br/>
              <a data-ng-href="{{onlinesrcService.getApprovedUrl(resource.lUrl)}}"
                 title="{{resource.lUrl}}"
                 data-ng-if="resource.lUrl.match('^http|ftp') !== null"
                 target="_blank">
                {{resource.lUrl}}
              </a>
              <span data-ng-if="resource.lUrl.match('^http|ftp') === null">
                {{resource.lUrl}}
              </span>
              <br/>
              <strong>{{resource.title | gnLocalized: lang}}</strong><br/>
              {{resource.description | gnLocalized: lang}}
            </div>
            <div class="col-md-1 text-right">
              <a href=""
                 class="onlinesrc-remove"
                 data-ng-if="readonly !== true"
                 data-ng-show="allowEdits"
                 title="{{'edit' | translate}}"
                 aria-label="{{'edit' | translate}}"
                 data-ng-click="onlinesrcService.onOpenPopup('onlinesrc', resource)">
                <i class="fa fa-pencil"></i>
              </a>
              <a href=""
                 class="onlinesrc-remove"
                 title="{{'remove' | translate}} {{resource.title | gnLocalized: lang}}"
                 aria-label="{{'remove' | translate}} {{resource.title | gnLocalized: lang}}"
                 data-ng-if="readonly !== true"
                 data-gn-confirm-click="{{'removeOnlinesrcConfirm' | translate:{url: resource.lUrl} }}"
                 data-gn-click-and-spin="onlinesrcService.removeOnlinesrc(resource)">
                <i class="fa fa-times text-danger"></i>
              </a>
            </div>
          </div>
        </li>
      </ul>


      <!-- ******* List of datasets ******* -->
      <h2 class="onlinesrc-title"
          data-ng-show="::isCategoryEnable('dataset') && relations.datasets">
          <i class="fa fa-files-o"></i><i class="icon-external-link"></i>&nbsp;
          <span data-translate="">datasets</span>
        <a href=""
           class="btn btn-default btn-xs pull-right"
           data-ng-click="onlinesrcService.onOpenPopup('dataset')">
          <i class="fa fa-fw fa-plus"></i>
          <span data-translate="">add</span>
        </a>
      </h2>
      <ul class="list-group"
          data-ng-show="::isCategoryEnable('dataset') && relations.datasets">
        <li class="list-group-item"
            data-ng-repeat="resource in relations.datasets | orderBy:'title'">
          <div class="row">
            <div class="col-md-11"
                 title="{{resource.description | gnLocalized: lang}}">
              <a target="_blank"
                 data-ng-href="{{buildMetadataLink(resource)}}">
                {{resource.title | gnLocalized: lang}}
              </a>
            </div>
            <div class="col-md-1 text-right">
              <a href="" class="onlinesrc-remove"
                 data-ng-if="readonly !== true"
                 title="{{'remove' | translate}} {{resource.title | gnLocalized: lang}}"
                 aria-label="{{'remove' | translate}} {{resource.title | gnLocalized: lang}}"
                 data-ng-click="onlinesrcService.removeDataset(resource)">
                <i class="fa fa-times text-danger"></i>
              </a>
            </div>
          </div>
        </li>
      </ul>

      <!-- ******* List of services ******* -->
      <h2 class="onlinesrc-title"
          data-ng-show="::isCategoryEnable('service') && relations.services">
        <i class="fa fa-share-square-o"></i>
        <i class="icon-external-link"></i>&nbsp;
        <span data-translate="">service</span>
        <a href=""
           class="btn btn-default btn-xs pull-right"
           data-ng-click="onlinesrcService.onOpenPopup('service')">
          <i class="fa fa-fw fa-plus"></i>
          <span data-translate="">add</span>
        </a>
      </h2>
      <ul class="list-group"
          data-ng-show="::isCategoryEnable('service') && relations.services">
        <li class="list-group-item"
            data-ng-repeat="resource in relations.services | orderBy:'title'">
          <div class="row">
            <div class="col-md-11"
                 title="{{resource.description | gnLocalized: lang}}">
              <a target="_blank"
                 data-ng-href="{{'../metadata/' + resource.id}}">
                {{resource.title | gnLocalized: lang}}
              </a>
            </div>
            <div class="col-md-1 text-right">
              <a href="" class="onlinesrc-remove"
                 data-ng-if="readonly !== true"
                 title="{{'remove' | translate}} {{resource.title | gnLocalized: lang}}"
                 aria-label="{{'remove' | translate}} {{resource.title | gnLocalized: lang}}"
                 data-ng-click="onlinesrcService.removeService(resource)">
                <i class="fa fa-times text-danger"></i>
              </a>
            </div>
          </div>
        </li>
      </ul>

      <!--******* List of parent ******* -->
      <h2 class="onlinesrc-title"
          data-ng-show="::isCategoryEnable('parent') && relations.parent">
        <i class="fa fa-sitemap" data-ng-class="onlinesrcService.reload ? 'fa-spin' : ''"></i>
        <i class="icon-external-link"></i>&nbsp;
        <span data-translate="">parentMd</span>
        <a href=""
           class="btn btn-default btn-xs pull-right"
           data-ng-click="onlinesrcService.onOpenPopup('parent')">
          <i class="fa fa-fw fa-plus"></i>
          <span data-translate="">add</span>
        </a>
      </h2>
      <ul class="list-group"
          data-ng-show="::isCategoryEnable('parent') && relations.parent">
        <li class="list-group-item"
            data-ng-repeat="resource in relations.parent | orderBy:'title'">
          <div class="row">
            <div class="col-md-11"
                 title="{{resource.description | gnLocalized: lang}}">
              <a target="_blank"
                 data-ng-href="{{'../metadata/' + resource.id}}">
                {{resource.title | gnLocalized: lang}}
              </a>
            </div>
            <div class="col-md-1 text-right">
              <a href="" class="onlinesrc-remove"
                 data-ng-if="readonly !== true"
                 title="{{'remove' | translate}} {{resource.title | gnLocalized: lang}}"
                 aria-label="{{'remove' | translate}} {{resource.title | gnLocalized: lang}}"
                 data-ng-click="onlinesrcService.removeMdLink('parent', resource)">
                <i class="fa fa-times text-danger"></i>
              </a>
            </div>
          </div>
        </li>
      </ul>

      <!-- ******* List of sources ******* -->
      <h2 class="onlinesrc-title"
          data-ng-show="::isCategoryEnable('source') && relations.sources">
        <i class="fa fa-sitemap fa-rotate-180"
           data-ng-class="onlinesrcService.reload ? 'fa-spin' : ''"></i>
        <i class="icon-external-link"></i>&nbsp;
        <span data-translate="">sourceDatasets</span>&nbsp;
        <a href=""
           class="btn btn-default btn-xs pull-right"
           data-ng-click="onlinesrcService.onOpenPopup('source')">
          <i class="fa fa-fw fa-plus"></i>
          <span data-translate="">add</span>
        </a>
      </h2>
      <ul class="list-group"
          data-ng-show="::isCategoryEnable('source') && relations.sources">
        <li class="list-group-item"
            data-ng-repeat="resource in relations.sources | orderBy:'title'">
          <div class="row">
            <div class="col-md-11"
                 title="{{resource.description | gnLocalized: lang}}">
              <a target="_blank"
                 data-ng-href="{{'../metadata/' + resource.id}}">
                {{resource.title | gnLocalized: lang}}
              </a>
            </div>
            <div class="col-md-1 text-right">
              <a href="" class="onlinesrc-remove"
                 data-ng-if="readonly !== true"
                 title="{{'remove' | translate}} {{resource.title | gnLocalized: lang}}"
                 aria-label="{{'remove' | translate}} {{resource.title | gnLocalized: lang}}"
                 data-ng-click="onlinesrcService.removeMdLink('source', resource)">
                <i class="fa fa-times text-danger"></i>
              </a>
            </div>
          </div>
        </li>
      </ul>

      <!-- ******* List of feature catalogs ******* -->
      <h2 class="onlinesrc-title"
          data-ng-show="::isCategoryEnable('fcats') && relations.fcats">
        <i class="fa fa-table"
           data-ng-class="onlinesrcService.reload ? 'fa-spin' : ''"></i>
        <i class="icon-external-link"></i>&nbsp;
        <span data-translate="">featureCatalog</span>
        <a href=""
           class="btn btn-default btn-xs pull-right"
           data-ng-click="onlinesrcService.onOpenPopup('fcats')">
          <i class="fa fa-fw fa-plus"></i>
          <span data-translate="">add</span>
        </a>
      </h2>
      <ul class="list-group"
          data-ng-show="::isCategoryEnable('fcats') && relations.fcats">
        <li class="list-group-item"
            data-ng-repeat="resource in relations.fcats | orderBy:'title'">
          <div class="row">
            <div class="col-md-11"
                 title="{{resource.description | gnLocalized: lang}}">
              <a target="_blank"
                 data-ng-href="{{resource['@subtype'] ? resource.url : ('../metadata/' + resource.id)}}">
                {{resource.title | gnLocalized: lang}}
              </a>
            </div>
            <div class="col-md-1 text-right">
              <a href="" class="onlinesrc-remove"
                 data-ng-if="readonly !== true"
                 title="{{'remove' | translate}} {{resource.title | gnLocalized: lang}}"
                 aria-label="{{'remove' | translate}} {{resource.title | gnLocalized: lang}}"
                 data-ng-click="onlinesrcService.removeFeatureCatalog(resource)">
                <i class="fa fa-times text-danger"></i>
              </a>
            </div>
          </div>
        </li>
      </ul>

      <!-- ******* List of datasets associated with this feature catalogs ******* -->
      <h2 class="onlinesrc-title"
          data-ng-show="::isCategoryEnable('fcats') && relations.hasfeaturecats">
        <i class="fa fa-files-o"></i>
        <i class="icon-external-link"></i>&nbsp;
        <span data-translate="">hasFeatureCatalog</span>
      </h2>
      <ul class="list-group"
          data-ng-show="::isCategoryEnable('fcats') && relations.hasfeaturecats">
        <li class="list-group-item"
            data-ng-repeat="resource in relations.hasfeaturecats | orderBy:'title'">
          <div class="row">
            <div class="col-md-11"
                 title="{{resource.description | gnLocalized: lang}}">
              <a target="_blank"
                 data-ng-href="{{'../metadata/' + resource.id}}">
                {{resource.title | gnLocalized: lang}}
              </a>
            </div>
          </div>
        </li>
      </ul>


      <!-- ******* List of siblings ******* -->
      <h2 class="onlinesrc-title"
          data-ng-show="::isCategoryEnable('sibling') && relations.siblings">
        <i class="fa fa-sign-out"
           data-ng-class="onlinesrcService.reload ? 'fa-spin' : ''"></i>
        <i class="icon-external-link"></i>&nbsp;
        <span data-translate="">siblings</span>&nbsp;
        <a href=""
           class="btn btn-default btn-xs pull-right"
           data-ng-click="onlinesrcService.onOpenPopup('sibling')">
          <i class="fa fa-fw fa-plus"></i>
          <span data-translate="">add</span>
        </a>
      </h2>
      <ul class="list-group"
          data-ng-show="::isCategoryEnable('sibling') && relations.siblings">
        <li class="list-group-item"
            data-ng-repeat="resource in relations.siblings | orderBy:'title'">
          <div class="row">
            <div class="col-md-11"
                 title="{{resource.description | gnLocalized: lang}}">
              <a target="_blank"
                 data-ng-href="{{'../metadata/' + resource.id}}">
                {{resource.title | gnLocalized: lang}}
                <span>{{'(' + resource.associationType.toUpperCase() + ')'}}</span>
              </a>
            </div>
            <div class="col-md-1 text-right">
              <a href="" class="onlinesrc-remove"
                 data-ng-if="readonly !== true"
                 title="{{'remove' | translate}} {{resource.title | gnLocalized: lang}}"
                 aria-label="{{'remove' | translate}} {{resource.title | gnLocalized: lang}}"
                 data-ng-click="onlinesrcService.removeSibling(resource)">
                <i class="fa fa-times text-danger"></i>
              </a>
            </div>
          </div>
        </li>
      </ul>

      <!-- ******* List of associated records (reverse direction of siblings) ******* -->
      <h2 class="onlinesrc-title"
          data-ng-show="::isCategoryEnable('sibling') && relations.associated">
        <i class="fa fa-sign-out"></i>
        <i class="icon-external-link"></i>&nbsp;
        <span data-translate="">siblings</span>&nbsp;
      </h2>
      <ul class="list-group"
          data-ng-show="::isCategoryEnable('sibling') && relations.associated">
        <li class="list-group-item"
            data-ng-repeat="resource in relations.associated | orderBy:'title'">
          <div class="row">
            <div class="col-md-11"
                 title="{{resource.description | gnLocalized: lang}}">
              <a target="_blank"
                 data-ng-href="{{'../metadata/' + resource.id}}">
                {{resource.title | gnLocalized: lang}}
              </a>
            </div>
          </div>
        </li>
      </ul>

    </div>
  </div>
</div>
